<template>
	<div class="edit-password">
		<ul>
			<li>
				<input :value="forms.name" v-on:input="formsChange('name')" ref="name" type="text" placeholder="输入姓名" />
				<span :class="[clears['name']?'active':'','clear']" @click.stop="clear('name')"></span>
			</li>
		</ul>
		<div class="ctl-cont">
			<button @click="submit" :class="submitStatus?'active':''">保存</button>
		</div>
    </div>
</template>

<script>
	import http from '../services/http';
	
	export default {
		name: 'edit-name',
    	data:function(){
    		return{
    			submitStatus:false,
    			forms:{},
    			clears:{}
    		}
    	},
    	methods:{
    		checkBtn(){//检查注册表是否全部输入
    			let self = this;
    			if(this.timeout)clearTimeout(this.timeout);
    			this.timeout = setTimeout(function(){
					let status = true;
					const config = ['name'];
					config.forEach(item => {
						if(!self.forms[item] || self.forms[item].length<=0){
							status = false;
						}
					});
					self.submitStatus = status;
				},300);
    		},
    		formsChange(key){
    			const cur = this.$refs[key].value;
    			this.forms[key] = cur;
    			this.clears[key] = cur.length>0 ? true : false;
    			this.forms = {...this.forms};
    			this.clears = {...this.clears};
    			this.checkBtn();
    		},
    		clear(key){
    			this.forms[key] = '';
    			this.clears[key] = false;
    			this.forms = {...this.forms};
    			this.clears = {...this.clears};
    			this.checkBtn();
    		},
    		submit(){
    			const {forms} = this;
    			http.put('/upm/api/v1/protected/user',{
				    "name":forms.name,
				},function(data){
					console.log(data);
					if(data.success){
					}else{
						toast(data.message||'登录失败');
					}
				});
    		}
    	}
    };
    
    
    
</script>
<style lang="css">

.edit-password{ 
	width: 100%;
	height: 100%;
	background: #f5f5f5;
	font-size: 1rem;
	border-top: 1px #f5f5f5;
}
.edit-password ul{
	background: #ffffff;
	margin-top: 10px;
	padding: 0 20px;
	width: 100%;
	float: left;
}

.edit-password li{
	position: relative;
	height: 51px;
	padding-bottom: 15px;
	padding-top: 15px;
}
.edit-password li:nth-of-type(1){
	border-bottom: solid 1px #e6e6e6;
}
.edit-password li:last-child{
	border-bottom: none;
}
.edit-password li.last{
	border-bottom: none;
}
.edit-password li .icon{
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 30px;
}
.edit-password li input{
	width: 100%;
	border: none;
	height: 100%;
	background: #ffffff;
	line-height: 20px;
	font-size: 1rem;
	padding: 0 26px 0 0;
}
.edit-password li .clear{
	display: none;
	position: absolute;
	right: 0;
	top: 0;
	height: 100%;
	width: 26px;
	cursor: pointer;
	background: transparent url(../assets/img/icon/input-clear.png) no-repeat center / auto 11px;
}
.edit-password li .clear.active{
	display: block;
}
.edit-password li.validate{
	padding-right: 95px;
}
.edit-password li .btn{
	position: absolute;
	right: 0;
	top: 7px;
	border-radius: 4px;
	padding: 0 8px;
	color: #4cb0b6;
	height: 28px;
	line-height: 28px;
	cursor: pointer;
	border: solid 1px #4cb0b6;
}
.edit-password li .btn.ban{
	color: #cccccc;
	border: solid 1px #cccccc;
}
.edit-password button{
	font-size: 1rem;
	text-align: center;
	line-height: 50px;
	height: 50px;
	width: 100%;
	background: #2dbe60;
	border-radius: 4px;
	color: rgba(225,225,225,0.7);
}
.edit-password button.active{
	color: #ffffff;
}

.edit-password .ctl-cont{
	margin-top: 10px;
	width: 100%;
	float: left;
}
.edit-password .ctl-cont p{
	padding: 10px 20px;
	color: #666667;
}
.edit-password .ctl-cont button{
	background: #ffffff;
	height: 50px;
	line-height: 50px;
	text-align: center;
	width: 100%;
	color: rgba(45,190,96,0.5);
	font-size: 1rem;
}
.edit-password .ctl-cont button.active{
	color: #2dbe60;
	color: rgba(45,190,96,1);
}







</style>
